{% extends "layout.html" %}

{% block breadcrumb %}
<li><a href="#">装机管理</a><span class="divider"></span></li>
<li class="active">定制系统</li>
{% endblock %}

{% block body %}
<div class="widget-box">
   <div class="widget-title"> 
      <h5 style="float:left;"><i class="fa fa-table fa-fw"></i>装机管理</h5>
      <button style="float:right;" class="btn btn-primary btn-sm" id="addBtn">添加系统</button>
   </div> <!--widget-title end-->

<!--添加系统模态窗-->
<div id="addModal" class="modal fade">
 <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">分配系统</h4>
	  </div><!--modal-header end-->

    <div class="modal-body">
    <form class="form-horizontal" id="addForm" accept-charset="UTF-8">
     <div class="control-group">
        <label class="control-label col-sm-3">系统名：</label>
        <div class="col-sm-9">
         <input type="text" name="profile" class="form-control"  datatype="*" errormsg="必须是1-16个字符" />
        </div>
    </div> <!--系统名称-->	

    <div class="control-group"> 
        <label class="control-label col-sm-3">URL：</label>
        <div class="col-sm-9">
         <input type="text" name="url" class="form-control"  datatype="*" errormsg="必须是1-16个字符" />
        </div>
    </div> <!--URL-->
    <div class="control-group">
        <label class="control-label col-sm-3">分区规划：</label>
        <div class="col-sm-9">
         <input type="text" name="partion" class="form-control"  datatype="*" errormsg="必须是1-16个字符" />
        </div>
    </div> <!--分区规划-->

    <div class="control-group">
            <label class ="control-label col-sm-3">镜像选择: </label>
                <div class="col-sm-9">
      	         <select id="distro" name="distro" class ="form-control multiselect" datatype="*" errormsg="角色不能为空" multiple="multiple" >
                    </select> 
                </div>
        </div> <!--镜像选择-->
    <div class="form-group">
         <div class="modal-footer">
                <button class="btn btn-primary" id="submitbtn" >确认添加</button>
			 	<button class="btn btn-warning" data-dismiss="modal">退出</button>
        </div> 
    </div>
    </form> 

      </div><!-- /.modal-body-->
   </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--更新装机模态窗-->
 
<div id="updateModal" class="modal fade">
 <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">更新装机信息</h4>
	  </div><!--modal-header end-->

    <div class="modal-body">
     <p hidden id="uperrorMsg" class="text-danger" style="color:red"></p> <!-- foe error msg-->
    <form class="form-horizontal" id="updateForm" accept-charset="UTF-8">
    <input type="hidden" id='upid' name="id">  <!--update need id-->
    <div class="control-group"> 
        <label class="control-label col-sm-3">分配IP：</label>
        <div class="col-sm-9">
         <input type="text" id="upip" name="ip" class="form-control"  datatype="s5-16" errormsg="必须是5-16个字符" />
        </div>
    </div> <!--分配IP-->
    <div class="control-group">
        <label class="control-label col-sm-3">掩码:</label>
        <div class="col-sm-9">
            <input  type="text" id="upsubnet" name="subnet" class="form-control" datatype="*" errormsg="不能为空" />
        </div> 
    </div><!--掩码-->

    <div class="control-group">
		<label class ="control-label col-sm-3">网关: </label> 
		<div class="col-sm-9">
         <input type="text" id="upgateway" name="gateway" class="form-control"  datatype="*" errormsg="不能为空" />
		</div >   
	</div> <!--网关-->
	
	 <div class="control-group">
        <label class="control-label col-sm-3">主机名：</label>
        <div class="col-sm-9">
            <input  type="text" id="uphostname" name="hostname" class="form-control" datatype="*" errormsg="不能为空" />
        </div>
    </div><!--主机名-->
    <div class="control-group">
            <label class ="control-label col-sm-3">MAC地址: </label>
                <div class="col-sm-9">
         <input type="text" id="upMAC" name="MAC" class="form-control"  datatype="*" errormsg="不能为空" />
                </div>
        </div> <!--MAC地址-->

    <div class="control-group">
            <label class ="control-label col-sm-3">操作系统: </label>
                <div class="col-sm-9">
                    <select id="upos" name="upos" class ="form-control multiselect" datatype="*" errormsg="角色不能为空" multiple="multiple" > 
                    </select>
                </div>
        </div> <!--操作系统-->
    <div class="control-group">
            <label class ="control-label col-sm-3">状态: </label>
                <div class="col-sm-9">
                        <select name='status' class="form-control"  style='width:120px'>
                        <option value=0>等待装机</option>
                        <option value=1>装机中</option>
                        <option value=2>装机完成</option>
                        </select>
                </div>
        </div> <!--状态-->

    <div class="form-group">
         <div class="modal-footer">
                <button class="btn btn-primary" id="upbtn" >确认更新</button>
			 	 <button class="btn btn-warning" data-dismiss="modal">退出</button>
        </div>  
    </div>
    </form> 

      </div><!-- /.modal-body-->
   </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="widget-content">
    <!--权限列表-->
		<table id ="datatable"  class="table table-bordered table-striped table-hover">
		<thead>
			<tr>
				<th>镜像</th>
				<th>系统文件</th>
				<th>ks文件</th>
				<th>操作</th> 
			</tr>
		</thead> 
		<tbody>
		</tbody>
	   </table>
</div><!--widget-content end-->

</div><!--widget-box end-->
{% endblock %}

{% block js %}

name='cobbler'
function datatable(){
    $('#datatable').DataTable({
        "language": {
            "lengthMenu": "每页 _MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "sInfo": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项)",
            "infoEmpty": "无记录",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            "sSearch": "搜索:",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "末页"
            }
        }
    });
};
/* list all data*/
function list(){
    url = "/listapi?method="+"profile"
    $.getJSON(url,function(data){
       data=JSON.parse(data['result']); //object 
       console.log(data)   
       if (data['code']== 0){       
           var str = ''
           $.each(data.result,function(k,v){  
               str +='<tr class="odd gradeX">'+  
               '<td>'+v['distro']+'</td>'+  
               '<td>'+v['os']+'</td>'+  
               '<td>'+v['ks']+'</td>'+   
               '<td>'+ 
               '<button class="btn btn-danger btn-sm delete-btn" data-id="'+v['id']+'">删除</button>'+ 
               '</td>'+ '</tr>'          
           })       
                $("tbody").html(str)
                datatable()
            }else{
                swal("error", data['errmsg'],"error")
            }
         })
}

list()



/*列出操作系统，拼成复选框*/

function distro(){
    var url = "/listapi?method=cobbler_distro"
    $.getJSON(url, function(data){
        data=JSON.parse(data['result'])
        console.log(data.result.comment)
        if (data['code']== 0){
            var str = ''
            $.each(data.result.comment, function(n,value){
                str += '<option>'+value+'</option>'
            })
            $("#distro").html(str)
            $('#distro').multiselect({maxHeight:200, enableCaseInsensitiveFiltering: true})
            $("#distro").multiselect('refresh')
        }else{
                swal("error","获取权限列表失败," + data['errmsg'],"error")
        } //if end
    })

}


/*点击按钮，显示添加用户模态窗*/
$("#addBtn").on('click',function(){
    distro()
    $('#addModal').modal('show')
})
$("#addForm").Validform({
    btnSubmit:"#submitbtn",
    tiptype:3, 
    datatype:{
        "zh2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
    }
})
/*用户添加*/
$('#addForm').on('submit',function(){
        var str = $('#addForm').serialize()
        var data={'method':"cobbler_profile",'formdata':str}
        console.log(data)
        $.post('/addapi',data,function(data){ 
            data=JSON.parse(data);   //将json串转换为对象，然后取值
            data = JSON.parse(data['result']) //object
            console.log(data)
            if (data['code']==0){
                    swal({
                        title:"success", 
                        text:"添加成功",
                        type:"success",
                        confirmButtonText:'确定'
                        },function(){
                            $('#addModal').modal('hide')
                            window.location.reload();
                         })
            }else{
                swal("error","创建用户失败," + data['errmsg'],"error")
             }   /*if end*/
         })  /*post end*/
         return false;
})  /*submit end*/




/*点击开始装机装机按钮*/
$("tbody").on('click','.cobbler-btn',function(){
    var id = $(this).attr('data-id')
    var url = "/getapi?method="+"cobbler"+"&id="+id
    $.getJSON(url,function(data){
      data = JSON.parse(data['result'])
      console.log(data)
      if (data['code']==0){
	    swal({
                 title:"success",
                 text:"系统定制成功，请启动服务器进行安装",
                 type:"success",
                 confirmButtonText:'确定'
                },function(){
                    $('#addModal').modal('hide')
                    window.location.reload();
                   })         
       
      }else{
          swal("Error", data['errmsg'], "error")
      }
    })
})


/*点击更新按钮*/
$("tbody").on('click','.update-btn',function(){
    var id = $(this).attr('data-id')
    var url = "/getapi?method="+"up_cObbler"+"&id="+id
    $.getJSON(url,function(data){
      data = JSON.parse(data['result'])
      if (data['code']==0){
          $('#upid').val(data['result']['id'])
          $('#upip').val(data['result']['ip'])
          $('#upMAC').val(data['result']['MAC'])
          $('#uphostname').val(data['result']['hostname'])
          $('#upgateway').val(data['result']['gateway'])
	  $('#upsubnet').val(data['result']['subnet'])
	  $('#updateModal').modal('show')
     	  up_profile() 
      }else{
          swal("Error", data['errmsg'], "error")
      }
    })
})


/*获取初始的操作系统数据*/
function up_profile(){
    var url = "/listapi?method=cobbler_profile"
    $.getJSON(url, function(data){
        data=JSON.parse(data['result'])
        console.log(data.result.comment)
        if (data['code']== 0){
            var str = ''
            $.each(data.result.comment, function(n,value){
                str += '<option>'+value+'</option>'
            })
            $("#upos").html(str)
            $('#upos').multiselect({maxHeight:200, enableCaseInsensitiveFiltering: true})
            $("#upos").multiselect('refresh')
        }else{
                swal("error","获取系统列表失败失败," + data['errmsg'],"error")
        } //if end
    })
}



/*cobbler*/
$('#updateForm').on('submit',function(){
        var str = $('#updateForm').serialize()
        var data = {'method':name,'formdata':str}
        $.post('/updateapi',data, function(data){  // data is string
            data = JSON.parse(data)    //object
            data = JSON.parse(data['result']) //object
            console.log(data)
            if (data['code']==0){   
            swal({
                title:"success",
                text:"更新成功",
                type:"success",
                confirmButtonText:'确定'
                },function(){
                    $('#updateModal').modal('hide')
                    location.reload()
                })
            }else{
                $('#uperrorMsg').html('Failed: '+data['errmsg']).show()
            }
        })
            return false   //get data and end
})  //submit form

/*删除用户*/
$("tbody").on('click','.delete-btn',function(){
	if(confirm("是否确认删除？")){
		var id = $(this).attr('data-id')
		var url =  "/deleteapi?method="+"cobbler_profile"+"&id="+id
        console.log(url)
		$.getJSON(url,function(data){
            data = JSON.parse(data['result'])
			if (data['code']== 0 ){
                swal({
                    title:"success",
                    text:"删除成功",
                    type:"success",
                    confirmButtonText:'删除成功'
                    },function(){
                        location.reload()
                    })
 				
			}else{
				swal(data['errmsg'])
			}
    	})
    }  // end confirm
})   
{% endblock %}
